<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../libs/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h2>{{title }}</h2>
      <h2>msg == {{msg }}</h2>
      <myhead></myhead>
      <child></child>
      <mymenu></mymenu>
      <my-nav></my-nav>
      <my-swipe></my-swipe>
      <mycpat></mycpat>
      <mycpat2></mycpat2>
      <hr />
      <div class="" id="obj"></div>
      <thiscpt></thiscpt>
      <mybtn></mybtn>
      <mybtn></mybtn>
      <mybtn></mybtn>
      <myfoot></myfoot>
    </div>
  </body>
  <script>
    //全局注册
    Vue.component("myhead", {
      template: "<h2>head - head - wh2116</h2>",
    });
    Vue.component("myfoot", {
      template: "<footer>盗版必究</footer>",
    });
    Vue.component("mymenu", {
      template: "<h2>menu - menu - menu</h2>",
    });
    Vue.component("mynav", {
      template: "<h2>Nav - Nav - Nav</h2>",
    });
    Vue.component("mySwipe", {
      template: "<h2>Swipe - Swipe - Swipe  轮播</h2>",
    });
    //组件选项对象
    const obj = {
      template:
        "<div> <h2> 内容 - 内容- content</h2><h2> 内容 - 内容- content</h2></div>",
      components: {},
      mounted() {},
      created() {},
      filters: {},
    };
    Vue.component("mycpt", obj);
    const obj2 = {
      template: "<h2> Vue 组件自定义</h2>",
      //唯独data 是一个函数   必须返回一个对象
      // 避免组件之间 的变量污染   保护组件内部的数据不受外界干扰
      data() {
        return {};
      },
      mounted() {},
      components: {},
      filters: {},
      watch: {},
      computed: {},
      methods: {},
    };
    Vue.component("mycpt2", obj2);

    var MyObj = Vue.extend(obj2); //从Vue 继承一个子类   MyObj（对象）
    new MyObj().$mount("#obj"); //载入到  id = obj 里面

    Vue.component("thiscpt", MyObj);
    Vue.component("mybtn", {
      template: "<button @click='change'> {{n}} </button> ",
      data() {
        return {
          n: 1,
        };
      },
      methods: {
        change() {
          this.n++;
        },
      },
      mounted() {},
    });

    const vm = new Vue({
      //el:"#app",
      //局部注册
      components: {
        child: {
          template: "<h2> Are you OK? </h2>",
        },
      },
      data: {
        title: "Vue 组件初步",
        msg: "小型、独立和通常可复用的组件构建大型应用",
      },
      mounted() {
        document.getElementsByTagName("title")[0].innerHTML = this.title;
      },
    }).$mount("#app");
  </script>
</html>
